<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.outer { position: relative; height: 100px; }*/
        /*.left { position: absolute; width: 100px; height: 100px; background: tomato; }*/
        /*.right { position: absolute; top: 0; right: 0; width: 200px; height: 100px; background: gold; }*/
        /*.center { margin-left: 100px; margin-right: 200px; height: 100px; background: lightgreen; }*/

        /*.outer { display: flex; height: 100px; }*/
        /*.left { width: 100px; background: tomato; }*/
        /*.right { width: 100px; background: gold; }*/
        /*.center { flex: 1; background: lightgreen; }*/

        .outer{display: flex;
            height: 100px;}
        .left{
            width: 100px;background: #00a4ff}
        .right{
            width: 100px;background: #55a532}
        .center{flex: 1;background: red}

    </style>
</head>
<body>
<div class="outer">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>
